<template>
  <div style="padding-bottom: 10px">
    <el-table v-loading="listLoading" :data="InvoicingList" show-summary>
      <el-table-column
        align="center"
        label="ID"
        prop="InvoicingID"
        show-overflow-tooltip
        width="70"
      />
      <el-table-column align="center" label="发票类型" width="120">
        <template #default="{ row }">
          <el-text>{{ row.InvoicingTypeName }}</el-text>
        </template>
      </el-table-column>
      <el-table-column align="center" label="发票号" width="120">
        <template #default="{ row }">
          <el-text>{{ row.InvoicingCode }}</el-text>
        </template>
      </el-table-column>
      <el-table-column align="center" label="开票金额" width="120">
        <template #default="{ row }">
          <el-text>{{ row.InvoicingMoney }}</el-text>
        </template>
      </el-table-column>
      <el-table-column align="center" label="客户方单位">
        <template #default="{ row }">
          <el-text>{{ row.CustomerCompanyName }}</el-text>
        </template>
      </el-table-column>
      <el-table-column align="center" label="纳税人识别号">
        <template #default="{ row }">
          <el-text>{{ row.CustomerLicenseCode }}</el-text>
        </template>
      </el-table-column>
      <el-table-column align="center" label="开票方单位">
        <template #default="{ row }">
          <el-text>{{ row.MyCompanyName }}</el-text>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="180">
        <template #default="{ row }">
          <el-button type="success" size="small" @click="productEdit(row)">
            修改
          </el-button>
          <el-button type="danger" size="small" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <vab-query-form style="padding: 10px">
    <el-form ref="formRef" :model="InvoicingForm">
      <el-row :gutter="24">
        <el-col :span="5">
          <el-form-item label="需开票类型" required>
            <el-select v-model="InvoicingForm.InvoicingType">
              <el-option
                v-for="(item, index) in InvoicingTypes"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-space>
            <el-form-item label="合同归属公司(客户)" required>
              <el-select
                v-model="InvoicingForm.CustomerLicenseID"
                style="width: 200px"
                @change="getCustomerLicense"
              >
                <el-option label="新增一个开票信息" :value="0" />
                <el-option
                  v-for="(item, index) in CustomerLicenseList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="InvoicingForm.CustomerLicenseID == 0"
              label-width="0"
            >
              <el-input
                v-model="InvoicingForm.CustomerCompanyName"
                placeholder="请输入单位全称"
              />
            </el-form-item>
          </el-space>
        </el-col>
        <el-col :span="6">
          <el-form-item label="纳税人识号(客户)" required>
            <el-input
              v-model="InvoicingForm.CustomerLicenseCode"
              style="width: 200px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item label="开票金额" required>
            <el-input v-model="InvoicingForm.InvoicingMoney" />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-space>
            <el-form-item label="开票单位(我方)" required>
              <el-select
                v-model="InvoicingForm.MyLicenseID"
                style="width: 200px"
              >
                <el-option label="新增一个开票信息" :value="0" />
                <el-option
                  v-for="(item, index) in MyLicenseList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-if="InvoicingForm.MyLicenseID == 0">
              <el-input
                v-model="InvoicingForm.MyCompanyName"
                style="width: 200px"
                placeholder="请输入单位全称"
              />
              <el-input
                v-model="InvoicingForm.MyCompanyCode"
                style="width: 200px"
                placeholder="请输入税号"
              />
            </el-form-item>
          </el-space>
        </el-col>
        <el-col :span="5">
          <el-form-item label="收据/发票号" required>
            <el-input
              v-model="InvoicingForm.InvoicingCode"
              style="width: 180px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item>
            <el-button type="primary" @click="saveInvoicingok">
              保存开票信息
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </vab-query-form>
</template>

<script>
  import { getInvoicingOptions } from '@/api/common'
  import { saveInvoicing } from '@/api/businessOrder'

  export default defineComponent({
    name: 'InvoicingList',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      // const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        OrderID: 0,
        CustomerID: 0,
        OrderFlowState: 1,
        listLoading: false,
        formRef: null,
        editRef: null,
        InvoicingTypes: [],
        CustomerLicenseList: [],
        MyLicenseList: [],
        InvoicingList: [],
        InvoicingForm: {
          OrderID: 0,
        },
        title: '',
      })
      const showList = (OrderInfo, list) => {
        state.OrderID = OrderInfo.OrderID
        state.CustomerID = OrderInfo.CustomerID
        getOptions()
        state.OrderFlowState = Math.abs(OrderInfo.OrderFlowState)
        state.InvoicingForm.OrderID = OrderInfo.OrderID
        state.InvoicingList = list
      }

      const getCustomerLicense = () => {
        if (state.InvoicingForm.CustomerLicenseID !== 0) {
          const Customer = state.CustomerLicenseList.find(
            (item) => item.value == state.InvoicingForm.CustomerLicenseID
          )
          state.InvoicingForm.CustomerLicenseCode = Customer.LicenseCode
        }
      }

      // const PaymentDelete = (row) => {
      //   console.log(row)
      //   if (row.OrderListID) {
      //     $baseConfirm('你确定要删除当前项吗', null, async () => {
      //       const { msg } = await deletePayment({
      //         OrderListID: row.OrderListID,
      //       })
      //       $baseMessage(msg, 'success', 'vab-hey-message-success')
      //       emit('fetch-data')
      //     })
      //   }
      // }
      const saveInvoicingok = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { msg } = await saveInvoicing(state.InvoicingForm)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            state.InvoicingForm = {
              OrderID: 0,
            }
            emit('fetch-data')
          }
        })
      }
      const getOptions = async () => {
        state.listLoading = true

        const params = {
          CustomerID: state.CustomerID,
        }

        console.log()

        const {
          data: { InvoicingTypes, CustomerLicenseList, MyLicenseList },
        } = await getInvoicingOptions(params)
        state.InvoicingTypes = InvoicingTypes
        state.CustomerLicenseList = CustomerLicenseList
        state.MyLicenseList = MyLicenseList
        state.listLoading = false
      }
      return {
        ...toRefs(state),
        showList,
        saveInvoicingok,
        getCustomerLicense,
      }
    },
  })
</script>
